import avatar from "./images/bozai.png";
import React from "react";
import "./Appscss.scss";
import Tab from "./components/Tabs.js";
import Form from "./components/Form.js";
import CommentList from "./components/CommentList.js";

class App extends React.Component {
  state = {
    active: "hot",
    txt: "",
    tab: [
      { type: "hot", text: "最热" },
      { type: "time", text: "最新" },
    ],
    user: {
      // 用户id
      uid: "30009257",
      // 用户头像
      avatar,
      // 用户昵称
      uname: "黑马前端",
    },
    defaultlist: [
      {
        // 评论id
        rpid: 3,
        // 用户信息
        user: {
          uid: "13258165",
          avatar:
            "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
          uname: "周杰伦",
        },
        // 评论内容
        content: "哎哟，不错哦",
        // 评论时间
        ctime: "10-18 08:15",
        // 喜欢数量
        like: 98,
        // 0：未表态 1: 喜欢 2: 不喜欢
        action: 0,
      },
      {
        rpid: 2,
        user: {
          uid: "36080105",
          avatar:
            "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg",
          uname: "许嵩",
        },
        content: "我寻你千百度 日出到迟暮",
        ctime: "11-13 11:29",
        like: 88,
        action: 2,
      },
      {
        rpid: 1,
        user: {
          uid: "30009257",
          avatar,
          uname: "黑马前端",
        },
        content: "学前端就来黑马",
        ctime: "10-19 09:00",
        like: 66,
        action: 1,
      },
    ],
  };
  // 点赞
  changeAttudde = (id, attude) => {
    console.log(id);
    console.log(attude);
    this.setState({
      defaultlist: this.state.defaultlist.map((item) => {
        if (item.rpid === id) {
          return {
            ...item,
            attude,
          };
        }
        return item;
      }),
    });
  };
  addComment = (comment) => {
    console.log(comment);
    this.setState({
      defaultlist: [
        {
          // 评论id
          rpid: 3,
          // 用户信息
          user: {
            uid: "13258165",
            avatar:
              "https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg",
            uname: "周杰伦",
          },
          // 评论内容
          content: comment,
          // 评论时间
          ctime: "10-18 08:15",
          // 喜欢数量
          like: 98,
          // 0：未表态 1: 喜欢 2: 不喜欢
          action: 0,
        },
        ...this.state.defaultlist,
      ],
    });
  };
  changeTab = (type) => {
    if (type === "hot") {
    }
    this.setState({
      active: type,
    });
  };
  delComment = (id) => {
    this.setState({
      defaultlist: this.state.defaultlist.filter((item) => item.rpid !== id),
    });
  };
  render() {
    const { tab, active, defaultlist } = this.state;

    return (
      <div className="App">
        <div className="app">
          {/* 导航 Tab */}
          <Tab tab={tab} active={active} changeTab={this.changeTab}></Tab>

          <div className="reply-wrap">
            {/* 发表评论 */}
            <Form addComment={this.addComment}></Form>
            {/* 评论列表 */}
            <CommentList
              list={defaultlist}
              delComment={this.delComment}
              changeAttudde={this.changeAttudde}
            ></CommentList>
            <div className="reply-none">暂无评论</div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;
